<template>
    <view>
        <view class="category_tab">
            <view class="category_tab_title">
                <view class="title_inner">
                    <uni-segmented-control
                        :values="items.map(v=>v.title)"
                        :current="current"
                        @clickItem="onClickItem"
                        style-type="text"
                        active-color="#d4237a"
                    ></uni-segmented-control>
                </view>
                <view class="iconfont iconsearch"></view>
            </view>
            <scroll-view
                    @scrolltolower="handleScrolltolower"
                    enable-flex
                    scroll-y
                    class="category_tab_content">
                <view class="cate_item"
                      v-for="(item,i) in vertical"
                      :key="i"
                >
                    <go-detail :list="vertical" :index="i">
                        <img :src="item.thumb" mode="widthFix" alt="">
                    </go-detail>
                </view>
            </scroll-view>

        </view>
    </view>
</template>

<script>
    import goDetail from "@/components/goDetail";
    import { uniSegmentedControl } from "@dcloudio/uni-ui"
    export default {
        components: {
            uniSegmentedControl,
            goDetail
        },
        name: "index",
        data() {
            return {
                items: [{ title: "最新", order: "new"}, { title: "热门", order: "hot" }],
                current: 0,
                // 页面标题
                title: "",
                id: 0,
                // 查询条件
                params: {
                    limit: 30,
                    skip:0,
                    // 最新
                    order: "new"
                },
                vertical: [],
                hasMore: true
            }
        },
        onLoad(options) {
            this.id = options.id;
            this.title = options.name;
            this.getList()
            // id=5109e04e48d5b9364ae9ac45&name=%E6%96%87%E5%AD%97
        },
        mounted() {
            // console.log(this.id);
            uni.setNavigationBarTitle({
                title: this.title + "类型"
            })
        },
        methods: {
            getList() {
                this.request({
                    url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
                    data: this.params
                }).then( result =>{
                    // console.log(result);
                    // this.vertical = result.res.vertical;
                    this.vertical = [...this.vertical, ...result.res.vertical]
                    console.log(this.vertical)
                })
            },
            onClickItem(e) {
                if (this.current !== e.currentIndex) {
                    this.current = e.currentIndex;
                }else {
                    return
                }
                this.params.order = this.items[e.currentIndex].order;
                this.params.skip = 0;
                this.vertical = [];
                this.getList()
            },
            handleScrolltolower() {
                if (this.hasMore) {
                    this.params.skip += this.params.limit;
                    this.getList();
                }else {
                    uni.showToast({
                        title: "没有数据了！",
                        icon: "none"
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .category_tab{
        .category_tab_title{
            position: relative;
            .title_inner{
                width: 60%;
                margin: 0 auto;
            }
            .iconfont{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 5%;
            }
        }
        .category_tab_content{
            display: flex;
            flex-wrap: wrap;
            height: calc(100vh - 36px);
            .cate_item{
                width: 33.33%;
                border: 5rpx solid #fff;
                img{}
            }
        }

    }

</style>
